<template>
  <div class="login">
    <div class="login_header">
      <div class="login_header_label">
        <img src="@/assets/company_logo.svg" class="svg-icon height_32px" alt="">
      </div>
      <a href="#" style="text-decoration: none;">
        <div class="visit-btn" >
          <img src="@/assets/globe.svg" class="svg-icon height_16px" alt="">
          Visit Site
        </div>
      </a>
    </div>
    <div class="login_form_box">
      <div class="login_form">
        <div class="login_form_title">
          {{ $t('Login') }}
        </div>
        <el-form :model="loginForm" :rules="loginRules">
          <el-form-item :label="$t('username')">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item class="last_form" :label="$t('Password')">
            <el-input v-model="loginForm.password"></el-input>
          </el-form-item>
        </el-form>
        <div class="s-button" @click="handleLogin">{{$t('Submit')}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { http } from '@/api'
export default {
  data() {
    return {
      loginForm: {
        username: 'test@test.com',
        password: 'test@test.com'
      },
      loginRules: {

      }
    }
  },
  methods: {
    async handleLogin() {
      await this.$store.dispatch('user/login', this.loginForm)
      if (this.$store.getters.permission.includes('CORRESPONDENCE')) {
        await this.$router.push({
          path: '/correspondence'
        })
      } else {
        this.$message.error('No Permission')
      }
    }
  }
}
</script>
<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/login-bg.webp');
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .login_header {
    display: flex;
    margin: 0 min(1.786rem,1.302vw);
    padding: min(0.286rem,0.208vw) min(0.286rem,0.208vw) min(0.286rem,0.208vw) min(1.5rem,1.094vw);
    border-radius: 0 0 min(0.571rem,0.417vw) min(0.571rem,0.417vw);
    background-color: #122a3a;
    .login_header_label {
      display: flex;
      flex: 1 0 auto;
      gap: min(0.714rem,0.521vw);
      align-items: center;
    }
    .visit-btn {
      display: flex;
      gap: min(0.286rem,0.208vw);
      align-items: center;
      justify-content: center;
      width: min(8.643rem,6.302vw);
      height: min(3.429rem,2.5vw);
      cursor: pointer;
      border-radius: min(0.571rem,0.417vw);
      outline: 1px solid #1C7292;
      background-color: #102535;
      color: #94f4ff;
      font-size: min(1.143rem,.833vw);
    }
  }
  .login_form_box {
    flex-grow: 1;
    position: relative;
  }
  .login_form {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: min(2.857rem,2.083vw);
    width: min(34.143rem,24.896vw);
    padding: min(2.286rem,1.667vw) min(4rem,2.917vw);
    border-radius: min(1.143rem,0.833vw);
    background: linear-gradient(121.61deg,rgba(255,255,255,.32) -16.18%,rgba(255,255,255,0) 17.75%),rgba(17,41,57,.64);
    box-shadow: 0 min(1.857rem,1.354vw) min(2.286rem,1.667vw) max(-1.857rem,-1.354vw) #000000bf;
    color: #fff;
    -webkit-backdrop-filter: blur(min(.643rem,.469vw));
    backdrop-filter: blur(min(0.643rem,0.469vw));
    .last_form {
      margin-bottom: 0 !important;
    }
  }
  .login_form_title {
    width: 100%;
    font-family: Manrope,sans-serif;
    font-size: min(1.714rem,1.25vw);
    font-weight: 800;
    text-align: center;
  }
}
</style>